<template>
<div class="body">
  <!-- banner start -->
  <el-carousel class="" height="550px" >
      <el-carousel-item v-for="(item,key) in bannerList" :key="key">
        <img :src="item.src" :alt="item.name">
        <h3>{{ item.name}}{{key}}</h3>
      </el-carousel-item>
    </el-carousel>
    <!-- banner end -->

    <!-- 行业动态 start -->
    <w-block title='行业动态' titleEng='INDUSTRY NEWS' :list="hangyeList"></w-block>
    <!-- 行业动态 end -->
    <!-- 产品中心 start -->
    <w-block title='产品中心' titleEng='PRODUCT CENTER' :list="hangyeList" :type=1></w-block>
    <!-- 产品中心 end -->

    <!-- 服务 start -->
    <div class="fw">
      <div class="fw_bg"><img src="http://gtxg.gitee.io/xj-jintai/Assets/images/bg_b.jpg" alt="" /></div>
      <w-block title='服 务' titleEng='SERVICE' :list="serviceList" :type=2 class="fw_m"></w-block>

    </div>
    <!-- 服务 end -->
</div>

</template>

<script>
import axios from 'axios'
import WBlock from '@/components/w-block/w-block'
export default {
  name: 'HelloWorld',
   data() {
      return {
        bannerList: [
          {
            name:'测试',
            src: 'http://gtxg.gitee.io/xj-jintai/Assets/wty/images/index/banner01.jpg',
            to: ''
          },
          {
            name: '',
            src: 'http://gtxg.gitee.io/xj-jintai/Assets/wty/images/index/banner03.jpg',
            to:''
          },
          {
            name: '',
            src: 'http://gtxg.gitee.io/xj-jintai/Assets/wty/images/index/banner02.jpg',
            to:''
          },
        ],
        indicatorPosition : "none",
        hangyeList: [
          {
            img: 'http://gtxg.gitee.io/xj-jintai/Assets/wty/images/index/新闻-1.jpg',
            title: '百年人寿荣获“年度最具成长性保险品牌”等多项大奖',
            desc: '11月8日，第十二届中国保险文化与品牌创新论坛隆重举行，会上同时进行了第十四届中国保险创新大奖的颁奖仪式。'
          },
          {
            img: 'http://gtxg.gitee.io/xj-jintai/Assets/wty/images/index/新闻-1.jpg',
            title: '百年人寿荣获“年度最具成长性保险品牌”等多项大奖',
            desc: '11月8日，第十二届中国保险文化与品牌创新论坛隆重举行，会上同时进行了第十四届中国保险创新大奖的颁奖仪式。'
          },
          {
            img: 'http://gtxg.gitee.io/xj-jintai/Assets/wty/images/index/新闻-1.jpg',
            title: '百年人寿荣获“年度最具成长性保险品牌”等多项大奖',
            desc: '11月8日，第十二届中国保险文化与品牌创新论坛隆重举行，会上同时进行了第十四届中国保险创新大奖的颁奖仪式。'
          },{
            img: 'http://gtxg.gitee.io/xj-jintai/Assets/wty/images/index/新闻-1.jpg',
            title: '百年人寿荣获“年度最具成长性保险品牌”等多项大奖',
            desc: '11月8日，第十二届中国保险文化与品牌创新论坛隆重举行，会上同时进行了第十四届中国保险创新大奖的颁奖仪式。'
          }
        ],
        serviceList: [
          {
            title: '品质优质',
            desc: 'High quality',
            icon: ''
          },
          {
            title: '品质优质',
            desc: 'High quality',
            icon: ''
          },
          {
            title: '品质优质',
            desc: 'High quality',
            icon: ''
          },
          {
            title: '品质优质',
            desc: 'High quality',
            icon: ''
          }
        ]
      };
    },
    components: {
      WBlock,
    },
    watch: {
        bannerList: function(val, oldVal) {
            if(val.length <=1) {
                this.indicatorPosition = "none";
            }else {
                this.indicatorPosition = "";
            }
        }
        
    },
    methods: {
      
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
.body
    font-family:"Microsoft Yahei";text-align:center;font-size:14px;color:#5B5B5B; padding:0; margin:0; 

    .el-carousel__item 
      img
        width:100%;  vertical-align:top;
    .fw
      width:100%; position:relative; height:452px; border-bottom:1px solid #bbb; padding:0px;
      .fw_bg
        width:100%; height:452px; position:absolute; left:0px; top:0px; z-index:1; overflow:hidden;
        img 
          width:1920px; height:452px; vertical-align:top;
        .fw_m
          z-index: 2;

</style>
